<template>
  <div>
     <div class="father">
       <div class="box" :class= "{active:flag1}"  @click= "currentIndex1">1</div>
       <div class="box" :class= "{active:flag2}" @click= "currentIndex2">2</div>
       <div class="box" :class= "{active:flag3}" @click= "currentIndex3">3</div>
     </div>
   </div>
</template>

<script>
export default {
  data() {
    return {
      flag1: true,
      flag2: false,
      flag3: false,   
    };
  },
  methods: {
    currentIndex1(){
      this.flag1 = !this.flag1
      this.flag2 = false
      this.flag3 = false
    },
     currentIndex2(){
      this.flag2 = !this.flag2
      this.flag1 = false
      this.flag3 = false
    },
     currentIndex3(){
      this.flag3 = !this.flag3
      this.flag1 = false
      this.flag2 = false
    },
  }
};
</script>


<style scoped>
     .box {
        border: 1px solid #333;
        width: 250px;
        height: 250px;
     }
     .father {
       display: flex;
     }
      .active {
        background-color: #087;
     }
</style>